<template>
    <div class="product-detail-description">
        <section class="product-detail-describe">
            <div class="describe-description">
                <!-- <h2 class="describe-title">Description</h2> -->
                <p class="describe-str1" v-html="detail.summarize"></p>
            </div>
            <div class="describe-advantage">
                <section>
                    <img src="https://img.podpartner.com/static/svgs-20230202/product-detail1.svg" alt="">
                    <h3>Features</h3>
                    <ul v-show="
                                    Array.isArray(detail.feature_introduction)
                                ">
                        <li v-for="(
                                        item, index
                                    ) in detail.feature_introduction" :key="index + 'feature_introduction'" class="midstr2" :disable="item == ''" v-html="item"></li>
                    </ul>
                </section>
                <section>
                    <img src="https://img.podpartner.com/static/svgs-20230202/product-detail2.svg" alt="">
                    <h3>Fabric</h3>
                    <ul v-show="Array.isArray(detail.material)">
                        <li v-for="(item, index) in detail.material" :key="index + 'material'" class="midstr2" :disable="item == ''" v-html="item"></li>
                        <li v-for="(item, index) in detail.weight" :key="index + 'weight'" class="midstr2" :disable="item == ''" v-html="item"></li>
                    </ul>
                </section>
                <section>
                    <img src="https://img.podpartner.com/static/svgs-20230202/product-detail3.svg" alt="">
                    <h3>Process</h3>
                    <ul v-show="Array.isArray(detail.technology)">
                        <li v-for="(item, index) in detail.technology" :key="index + 'technology'" class="midstr2" :disable="item == ''" v-html="item"></li>
                    </ul>
                </section>
            </div>
        </section>
        <section class="product-detail-expound">
            <article class="product-detail-supplement">
                <div class="product-detail-supplement-instructions">
                    <h2 class="describe-title">Care instructions</h2>
                    <div class="product-detail-supplement-icon">
                        <img src="https://img.podpartner.com/static/svgs-20230202/pdetail-icon1.svg" alt="">
                        <img src="https://img.podpartner.com/static/svgs-20230202/pdetail-icon2.svg" alt="">
                        <img src="https://img.podpartner.com/static/svgs-20230202/pdetail-icon3.svg" alt="">
                        <img src="https://img.podpartner.com/static/svgs-20230202/pdetail-icon4.svg" alt="">
                        <img src="https://img.podpartner.com/static/svgs-20230202/pdetail-icon5.svg" alt="">
                    </div>
                    <ul v-show="Array.isArray(detail.maintain)">
                        <li v-for="(item, index) in detail.maintain" :disable="item == ''" class="detail-str4" :key="index" v-html="item"></li>
                    </ul>
                </div>
                <div class="product-detail-supplement-other" v-if="
                            detail.other_description &&
                            detail.other_description[0] != ''
                        ">
                    <h2 class="describe-subtitle">More info</h2>
                    <p v-for="(item, index) in detail.other_description" :disable="item == ''" class="detail-str4" :key="index" v-html="item"></p>
                </div>
            </article>
            <article class="product-detail-expound-size">
                <h2 class="describe-title">Size guide</h2>
                <!-- <p>All sizes in the table refer to clothing sizes</p> -->
                <div class="tablebox">
                    <div class="tablebox-radio">
                        <div :class="{'tablebox-radio-active':radio1 == 'Imperial'}" @click="radio1 = 'Imperial'">
                            Imperial
                        </div>
                        <div :class="{'tablebox-radio-active':radio1 == 'Metric'}" @click="radio1 = 'Metric'">
                            Metric
                        </div>
                    </div>

                    <!-- table  -->
                    <div class="table-warp">
                        <table class="table" v-show="radio1 == 'Imperial'">
                            <thead>
                                <tr>
                                    <th v-for="(item, index) in expoundSize.imperial.head" :key="index">
                                        {{ item }}
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item, index) in expoundSize.imperial.body" :key="index">
                                    <td v-text="item.key_name"></td>
                                    <td v-for="i in item.value" :key="i.size_id" v-text="i.measure"></td>
                                </tr>
                            </tbody>
                        </table>

                        <table class="table" v-show="radio1 == 'Metric'">
                            <thead>
                                <tr>
                                    <th v-for="(item, index) in expoundSize.metric.head" :key="index">
                                        {{ item }}
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item, index) in expoundSize.metric.body" :key="index">
                                    <td v-text="item.key_name"></td>
                                    <td v-for="i in item.value" :key="i.size_id" v-text="i.measure"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <h3>
                        <i class="iconfont icon-xiangqing2"></i> This size guide shows product measurements taken when products are laid flat. Actual product measurements may vary by up to 1" (2.5cm).
                    </h3>
                </div>
            </article>
        </section>
    </div>
</template>
<script>
export default {
    name: "DetailDescription",
    props: ['detail'],
    computed: {
        //构造尺码表
        expoundSize () {
            const imperial = this.detail.english_system || [];
            const metric = this.detail.metric_system || [];
            const result = {
                imperial: { head: [], body: [] },
                metric: { head: [], body: [] },
            }

            imperial.map((item, index) => {
                if (index == 0) {
                    result.imperial.head.push('');
                    item.value.map(item => result.imperial.head.push(item.size_name));
                }
                result.imperial.body.push(item);
            })

            metric.map((item, index) => {
                if (index == 0) {
                    result.metric.head.push('');
                    item.value.map(item => result.metric.head.push(item.size_name));
                }
                result.metric.body.push(item);
            })

            return result
        },
    },
    data () {
        return {
            radio1: "Imperial",
        }
    },
    methods: {}
}
</script>
<style scoped lang="scss">
.product-detail-description {
    width: 100%;
    font-family: Roboto;
    .describe-str1 {
        font-size: 14px;
        font-weight: 400;
        color: #000000;
        line-height: 26px;
    }
    .midstr2 {
        font-size: 14px;
        color: #000;
        line-height: 26px;
    }
    .describe-title {
        font-size: 18px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 28px;
        margin-bottom: 20px;
    }
    .describe-subtitle {
        font-size: 16px;
        font-family: Roboto-Medium, Roboto;
        font-weight: normal;
        color: #000000;
        line-height: 28px;
        margin-bottom: 4px;
    }
    .detail-str4 {
        font-size: 14px;
        font-weight: 400;
        color: #000000;
        line-height: 22px;
    }
    .product-detail-describe {
        width: 100%;
        display: flex;
        flex-direction: column;
        .describe-description {
            margin-bottom: 22px;
        }
        .describe-advantage {
            padding: 0 0 32px 0px;
            border-bottom: #dcdcdc 1px solid;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin: 0 0 32px 0;
            > section {
                width: 300px;
                & > img {
                    width: 48px;
                    height: 48px;
                }
                > h3 {
                    margin: 0px 0 10px;
                    font-size: 18px;
                    font-family: Roboto-Medium, Roboto;
                    font-weight: 500;
                    color: #000000;
                }
                li {
                    padding-left: 16px;
                    position: relative;
                    &[disable='true'] {
                        display: none;
                    }
                    &::before {
                        content: '';
                        display: flex;
                        position: absolute;
                        left: 0;
                        top: 10px;
                        width: 6px;
                        height: 6px;
                        border-radius: 3px;
                        background: #555555;
                    }
                }
            }
        }
    }
    .product-detail-expound {
        width: 100%;
        .product-detail-expound-size {
            width: 100%;
            margin: 0 0 80px;
            align-items: flex-start;
            & > .describe-str1 {
                margin: 0 0 24px 0;
            }
            > p {
                font-size: 16px;

                color: #000000;
                line-height: 18px;
                margin-bottom: 36px;
            }
            .tablebox {
                width: 100%;
                .tablebox-radio {
                    display: inline-block;
                    border-bottom: 1px solid #e6e6e6;
                    div {
                        display: inline-block;
                        cursor: pointer;
                        &:first-child {
                            margin-right: 18px;
                        }
                        padding: 0 2px;
                        text-align: center;
                        height: 32px;
                        background: #ffffff;
                        font-size: 14px;
                        color: #000;
                        line-height: 32px;
                        font-family: Roboto-Medium, Roboto;
                        font-weight: normal;
                        &.tablebox-radio-active {
                            position: relative;
                            &::after {
                                content: '';
                                display: block;
                                position: absolute;
                                bottom: -1px;
                                left: 0;
                                width: 100%;
                                height: 2px;
                                background-color: #ea4c89;
                            }
                            color: #ea4c89;
                        }
                    }
                }

                > h3 {
                    > i {
                        text-align: center;
                        display: inline-block;
                        font-size: 14px;
                        color: #acacac;
                        height: 14px;
                        width: 14px;
                    }
                    font-size: 14px;
                    color: #000000;
                    font-weight: 400;
                    line-height: 16px;
                    margin-top: 6px;
                }
            }
        }
        .product-detail-supplement {
            padding-bottom: 16px;
            margin-bottom: 32px;
            border-bottom: 1px solid #dcdcdc;
            > div {
                margin: 0 0 16px 0;
            }
        }
    }
    .table-warp {
        width: 100%;
        padding-bottom: 8px;
        box-sizing: border-box;
        overflow-x: auto;
        .table {
            margin: 20px 0 0;
            tr {
                &:nth-child(even) {
                    background: #fafafa;
                }
            }
            tbody > tr:last-child {
                border-bottom: 1px #d8d8d8 solid;
            }
            td,
            th {
                min-width: 72px;
                width: 72px;
                height: 42px;
                // border: solid 1px #d9d9d9;
                box-sizing: border-box;
                &:nth-child(2) {
                    box-sizing: content-box;
                    padding-left: 12px;
                }
                &:last-child {
                    box-sizing: content-box;
                    padding-right: 12px;
                }
            }
            td {
                &:first-child {
                    min-width: 120px;
                    width: 120px;
                    text-align: center;
                    font-size: 14px;
                    font-family: Roboto-Medium, Roboto;
                    font-weight: 500;
                    color: #000000;
                    border-right: 1px #d8d8d8 solid;
                }
                color: #000;
                text-align: center;
                font-size: 14px;
                font-family: Roboto-Regular, Roboto;
                font-weight: 400;
            }
            th {
                background: #f6f6f6;
                text-align: center;
                font-size: 14px;
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;
                color: #000;
                border-top: 1px #d8d8d8 solid;
                &:first-child {
                    border-right: 1px #d8d8d8 solid;
                    width: 120px;
                }
            }
        }
    }

    .product-detail-supplement-icon {
        margin: 20px 0 20px;
        svg,
        img {
            width: 32px;
            height: 32px;
            margin-right: 20px;
        }
    }
}

@media (max-width: 960px) {
    .product-detail-describe {
        .describe-advantage {
            flex-direction: column !important;
            align-items: flex-start;
            padding-left: 24px !important;
            margin: 0 0 32px 0 !important;
            & > section:not(:last-child) {
                margin-bottom: 24px;
            }
        }
        .describe-description {
            margin-bottom: 32px;
        }
    }
    .product-detail-expound {
        .product-detail-supplement-instructions .describe-title {
            margin-bottom: 24px;
        }
        .product-detail-supplement-other .describe-title {
            margin-bottom: 4px;
        }
        .product-detail-expound-size {
            margin-bottom: 60px !important;
            .describe-title {
                margin-bottom: 16px !important;
            }
            .tablebox table {
                margin-top: 18px;
            }
        }
    }
}
</style>